<template>
    <div class="main">
        <el-row>
            <el-col :span="8">
                <el-row class="ga-select">
                    <el-col :span="12" class="sp8_co1">
                        <span>待分配项目：{{ waitallot }}</span>
                    </el-col>
                </el-row>
                <div class="main-table1">
                    <el-table :data="waitData" highlight-current-row :header-cell-style="headClass"
                        @row-click="handleRowClick">
                        <el-table-column prop="group" label="组别" align="center">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" align="center">
                        </el-table-column>
                        <el-table-column prop="item" label="项目" width="200" align="center">
                        </el-table-column>
                        <el-table-column prop="number" label="人数" align="center">
                        </el-table-column>
                        <el-table-column prop="classnum" label="组数" align="center">
                        </el-table-column>
                        <el-table-column prop="raceval" label="赛次" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col class="sp1" :span="1">
                <div>
                    <div class="center_btn">
                        <a href="#" @click="rightTopIncrease">
                            <img src="/uploads/button_right_up.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn">
                        <a href="#" @click="rightBottomIncrease">
                            <img src="/uploads/button_right_down.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn">
                        <a href="#" @click="leftTopIncrease">
                            <img src="/uploads/button_left.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn">
                        <a href="#" @click="resetValue">
                            <img src="/uploads/button_left_day.gif" alt="">
                        </a>
                    </div>
                </div>
            </el-col>
            <el-col :span="15">
                <el-row class="ga-select">
                    <el-col :span="4" class="co15_co1">
                        <span>已分配项目：{{ assigned }}</span>
                    </el-col>
                    <el-col class="sp15_co5" :span="20">
                        <el-button type="primary" @click="exportExcel">成绩册导出</el-button>
                    </el-col>
                </el-row>
                <div class="main-table2">
                    <el-table :data="alreadyData" highlight-current-row :header-cell-style="headClass"
                        @row-click="rightRowClick">
                        <el-table-column type="index" label="序号" width="60" align="center">
                        </el-table-column>
                        <el-table-column prop="group" label="组别" align="center">
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" align="center">
                        </el-table-column>
                        <el-table-column prop="item" label="比赛项目" width="200" align="center">
                        </el-table-column>
                        <el-table-column prop="raceval" label="赛次" align="center">
                        </el-table-column>
                        <el-table-column prop="number" label="人数" align="center">
                        </el-table-column>
                        <el-table-column prop="classnum" label="组数" align="center">
                        </el-table-column>
                        <el-table-column prop="enroll" label="录取" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            assigned: 0,
            waitallot: 0,
            waitData: [{
                group: '1',
                sex: '男',
                item: '50米自由泳',
                number: '5',
                classnum: '3',
                raceval: '1',
                enroll: ''
            }, {
                group: '1',
                sex: '女',
                item: '50米蝶泳',
                raceval: '1',
                number: '8',
                classnum: '4',
                enroll: '3',
            }],
            leftTable: {},
            valTable: null,
            // 右边表格
            alreadyData: [],
            rightTable: {},
            valTable2: null,

        }
    },
    created() {
        this.assigned = this.alreadyData.length
        this.waitallot = this.waitData.length
    },
    methods: {
        headClass() {
            return { 'background': '#27ae60', 'color': '#FFFFFF' }
        },
        // 左边表格数据选择
        handleRowClick(row) {
            this.leftTable = row
            this.valTable = this.waitData.indexOf(row)
        },
        // 右边表格数据获取
        rightRowClick(row) {
            this.rightTable = row
            this.valTable2 = this.alreadyData.indexOf(row)
        },
        // 导出
        exportExcel() {
            const data = [
                ['Column1', 'Column2', 'Column3'],
            ];
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Simple');
            XLSX.writeFile(workbook, '成绩册S.xlsx');
        },
        // 右上按钮
        rightTopIncrease() {
            if (this.valTable !== null) {
                this.waitData.splice(this.valTable, 1)
                this.alreadyData.unshift(this.leftTable)
                this.assigned++
                this.waitallot--
                this.valTable = null
            } else {
                this.$message.error('未选择项目！请选择分配项目');
            }
        },
        // 右下按钮
        rightBottomIncrease() {
            // console.log(this.leftTable)
            if (this.valTable !== null) {
                this.waitData.splice(this.valTable, 1) // 删除掉左边数据
                this.alreadyData.push(this.leftTable) // 数据添加到右边
                this.assigned++ // 已分配num自增
                this.waitallot-- // 待分配num自减
                this.valTable = null // 选择完项目后选择为空
            } else {
                this.$message.error('未选择项目！请选择分配项目');
            }
        },
        // 左分配按钮
        leftTopIncrease() {
            if (this.valTable2 !== null) {
                this.alreadyData.splice(this.valTable2, 1)
                this.waitData.unshift(this.rightTable)
                this.assigned--
                this.waitallot++
                this.valTable2 = null
            } else {
                this.$message.error('未选择项目！请选择分配项目');
            }
        },
        // button-left按钮
        resetValue() {
            this.alreadyData.forEach(item => {
                this.waitData.push(item)
            })
            this.waitallot = this.waitallot + this.alreadyData.length
            this.assigned = this.assigned - this.alreadyData.length
            this.alreadyData.splice(this.alreadyData)
        },
    }
}
</script>

<style lang="less" scoped>
.main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;

    .main-table1 {
        border: 1px solid #27ae60;
        height: 90vh;
        margin-top: 16px;
    }

    .main-table2 {
        border: 1px solid #27ae60;
        height: 90vh;
        margin-top: 10px;
    }
}

.sp1 {
    display: flex;
    align-items: center;
    justify-content: center;

    .center_btn {
        margin-bottom: 30px;
    }
}

.sp8_co1 {
    text-align: left;
    margin-top: 5px;
}

.co15_co1 {
    margin-top: 5px;
}

.sp15_co5 {
    text-align: right;
}
</style>